'use client'

import { useState } from 'react'
import { Card, Button, Input, Typography, Space, Row, Col } from 'antd'
import { ClearOutlined, DeleteOutlined } from '@ant-design/icons'

const { Title, Text } = Typography

export default function Calculator() {
  const [display, setDisplay] = useState('0')
  const [equation, setEquation] = useState('')

  const handleNumber = (num: string) => {
    if (display === '0') {
      setDisplay(num)
    } else {
      setDisplay(display + num)
    }
  }

  const handleOperator = (op: string) => {
    setEquation(display + ' ' + op + ' ')
    setDisplay('0')
  }

  const handleEqual = () => {
    try {
      const result = eval(equation + display)
      setDisplay(result.toString())
      setEquation('')
    } catch (error) {
      setDisplay('Error')
    }
  }

  const handleClear = () => {
    setDisplay('0')
    setEquation('')
  }

  const handleDelete = () => {
    if (display.length === 1) {
      setDisplay('0')
    } else {
      setDisplay(display.slice(0, -1))
    }
  }

  const buttons = [
    ['7', '8', '9', '/'],
    ['4', '5', '6', '*'],
    ['1', '2', '3', '-'],
    ['0', '.', '=', '+']
  ]

  return (
    <div>
      <Title level={2}>计算器</Title>
      <Text type="secondary">多功能计算工具</Text>
      
      <Card style={{ maxWidth: 400, margin: '24px auto' }}>
        <Space direction="vertical" style={{ width: '100%' }}>
          {/* 显示区域 */}
          <div style={{ 
            background: '#f5f5f5', 
            padding: '16px', 
            borderRadius: '8px',
            textAlign: 'right',
            minHeight: '60px'
          }}>
            <div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
              {equation}
            </div>
            <div style={{ fontSize: '24px', fontWeight: 'bold' }}>
              {display}
            </div>
          </div>

          {/* 控制按钮 */}
          <Row gutter={8}>
            <Col span={12}>
              <Button 
                block 
                icon={<ClearOutlined />}
                onClick={handleClear}
                danger
              >
                清除
              </Button>
            </Col>
            <Col span={12}>
              <Button 
                block 
                icon={<DeleteOutlined />}
                onClick={handleDelete}
              >
                删除
              </Button>
            </Col>
          </Row>

          {/* 数字和运算符按钮 */}
          {buttons.map((row, rowIndex) => (
            <Row key={rowIndex} gutter={8}>
              {row.map((btn, colIndex) => (
                <Col key={colIndex} span={6}>
                  <Button
                    block
                    size="large"
                    type={btn === '=' ? 'primary' : 'default'}
                    onClick={() => {
                      if (btn === '=') {
                        handleEqual()
                      } else if (['+', '-', '*', '/'].includes(btn)) {
                        handleOperator(btn)
                      } else {
                        handleNumber(btn)
                      }
                    }}
                  >
                    {btn}
                  </Button>
                </Col>
              ))}
            </Row>
          ))}
        </Space>
      </Card>
    </div>
  )
} 